<template>
    <header>
        <div
            class="header-inner"
            :style="{
                maxWidth: `${props.maxWidth}px`,
                minWidth: `${props.minWidth}px`,
            }"
        >
            <div class="logo">
                <img src="@/assets/logo.svg" />
            </div>
            <slot></slot>
        </div>
    </header>
</template>

<script lang="ts" setup>
type PropsType = {
    maxWidth?: number
    minWidth?: number
}

const props = withDefaults(defineProps<PropsType>(), {
    maxWidth: 960,
    minWidth: 768,
})
</script>

<style lang="less" scoped>
header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    .header-inner {
        height: 52px;
        display: flex;
        position: relative;
        margin: 0 auto;
    }
}
</style>
